<template>
    <div>
        <router-view></router-view>
        <div class="bottom-nav">
            <ul :class="{home:true,active:homeStyle}" @click="goPage('/index')">
                <li></li> 
                <li>首页</li>
            </ul>
            <ul :class="{cart:true,active:cartStyle}" @click="goPage('/cart')">
                <li></li>
                <li>购物车</li>
                <li class="spot" v-show="$store.state.cart.cartData.length > 0"></li>
            </ul>
            <ul :class="{my:true,active:myStyle}" @click="goPage('/my')">
                <li></li>
                <li>我的</li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name:"home",
    data () {
        return {
            homeStyle:true,
            cartStyle:false,
            myStyle:false,
        }
    },
    methods:{
        goPage(url){
            this.$router.replace(url);
        },
        /*
        因为在更新组件中使用，会进行正常显示，但是刷新之后会回到默认的首页中，而内容却停留在之前的内容
        所以在created中也要重新写入，既然两者都要写入，那么就封装为一个方法，之后通过方法去进行调用就好
        解决刷新之后内容与底部导航栏不符合的问题
        */
        changeStyleNac (name) {
            switch(name){
                case "index":
                    this.homeStyle = true;
                    this.cartStyle = false;
                    this.myStyle = false;
                    break;
                case "cart":
                    this.homeStyle = false;
                    this.cartStyle = true;
                    this.myStyle = false;
                    break;
                case "my":
                    this.homeStyle = false;
                    this.cartStyle = false;
                    this.myStyle = true;
                    break;
                default:
                    this.homeStyle = true;
                    this.cartStyle = false;
                    this.myStyle = false;
                    break;
            }
        }
    },
    //在挂载点设置，使用created因为不涉及到获取DOM，所有暂时不用mounted,created是在实例创建完成后立即调用
    //creadted钩子函数主要是用来初始化数据
    //在创建vue对象时，当html渲染之前就触发;但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次
    created(){
        document.title = this.$route.meta.title;
        this.changeStyleNac(this.$route.name)
    },

    //组件更新钩子函数
    beforeRouteUpdate(to,from,next) {
        // console.log(to);
        document.title = to.meta.title;
        this.changeStyleNac(to.name);
        next();
    },
    /*
    activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等
    与created相辅相成，解决在首页缓存下来回切换的时候切换不回来的情况，在activated中把created中的内容重新加载一下就可以
    当然了，二者不能删除，缺一不可.

    activated 生命周期在keep-alive 组件激活时调用
    服务器端渲染期间不调用该生命周期
    */
    activated () {
        document.title = this.$route.meta.title;
        this.changeStyleNac(this.$route.name)
    }
}
</script>

<style scoped>
    /* scoped为了防止命名冲突，形成一个作用域，在自身的组件以及模块中有效 */
    .bottom-nav {
        width: 100%;
        height: 1.2rem;
        background-color: #fff;
        box-shadow: 0 0 10px #efefef;
        position: fixed;
        z-index: 10;
        left: 0px;
        bottom: 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 0.5rem;
        box-sizing: border-box;
    }
    .bottom-nav ul {
        width: 1rem;
        position: relative;
    }
    .bottom-nav ul li:nth-child(1) {
        width: 0.6rem;
        height: 0.6rem;
        margin: 0 auto;
    }
    .bottom-nav ul li:nth-child(2) {
        font-size: 0.28rem;
        text-align: center;
    }
    .bottom-nav ul.active li:nth-child(2) {
        color: #eb1625;
    }

    .bottom-nav ul .spot {
        width: 0.2rem;
        height: 0.2rem;
        position: absolute;
        right: 0px;
        top: 0px;
        z-index: 2;
        background-color: #eb1625;
        border-radius: 100%;
    }

    .bottom-nav ul.home li:nth-child(1) {
        background-image: url("../../../assets/images/home/main/home1.png");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
    }
    .bottom-nav ul.home.active li:nth-child(1) {
        background-image: url("../../../assets/images/home/main/home2.png");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
    }
    /* 购物车 */
    .bottom-nav ul.cart li:nth-child(1) {
        background-image: url("../../../assets/images/home/main/cart1.png");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
    }
    .bottom-nav ul.cart.active li:nth-child(1) {
        background-image: url("../../../assets/images/home/main/cart2.png");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
    }
    /* 我的 */
    .bottom-nav ul.my li:nth-child(1) {
        background-image: url("../../../assets/images/home/main/my1.png");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
    }
    .bottom-nav ul.my.active li:nth-child(1) {
        background-image: url("../../../assets/images/home/main/my2.png");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
    }
</style>